<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>广播面板</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.75">
    <!--360浏览器优先以webkit内核解析-->
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../../../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../../../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../../../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <!-- Morris -->
    <link href="../../../static/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <!-- Gritter -->
    <link href="../../../static/js/plugins/gritter/jquery.gritter.css"
          th:href="@{/js/plugins/gritter/jquery.gritter.css}" rel="stylesheet">
    <!--js-->
    <script th:src="@{/js/views/bPannel.js}"></script>
    <!--echarts 可视化图形 插件-->
    <script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
    <script th:src="@{/js/plugins/echarts/echarts-gl.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
    <script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
    <link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
</head>
<body class="gray-bg" onload="bonLoad();select();$.table.search()">
<div class="row  border-bottom  dashboard-header">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>广播时间(最近)分布可视化</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_bt_mbygroup()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="bt_mbygroup"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>广播时间(最长)分布可视化</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_bd_mbygroup()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="bd_mbygroup"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>广播类型分布可视化</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_bds_mbygroup()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="bds_mbygroup"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>操作类型</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_ptp_mbygroup()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="ptp_mbygroup"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>终端数量以及在线状态统计</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_bd_terminalstate()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="bd_terminalstate"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>广播时长分类可视化</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_bl_terminalstate()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="bl_mygroup"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>广播是否公共可视化</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_bip_terminalstate()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="bip_mygroup"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>终端维护可视化</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="bd_terminlgroup"></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>三维广播分组可视化</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="sort_3d_bt()">排序数据</a>
                                </li>
                                <li><a onclick="init_3d_bt()">原始数据</a>
                                </li>
                            </ul>
                            <!--                                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>-->
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="3d_bt"  style="height:400px;" ></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>广播地域分布可视化</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="sort_ec_bt()">排序</a>
                                </li>
                                <li><a onclick="init_ec_bt()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="bt_sum" style="height:400px;" ></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 select-table table-striped">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <table id="bootstrap-table" data-mobile-responsive="true"></table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">
    //分页查询
    function select() {
        var options = {
            url: "/broad/pannel/list",
            search: false,
            columns: [
                {
                    field: 'sfid',
                    title: '广播ID',
                    visible: true
                },
                {
                    field: 'broaddate',
                    title: '创建时间',
                    sortable: true
                },
                {
                    field: 'uname',
                    title: '广播地点',
                    sortable: true
                },
                {
                    field: 'count',
                    title: '播放次数',
                    sortable: true
                }]
        };
        $.table.init(options);
    }
</script>
<!--jquery图表float插件-->
<script th:src="@{/js/plugins/flot/jquery.flot.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.tooltip.min.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.spline.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.resize.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.pie.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.symbol.js}"></script>
<!--jquery图表peity插件-->
<script th:src="@{/js/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{/js/demo/peity-demo.min.js}"></script>
<script th:src="@{/js/content.min.js}"></script>
<!--jquery交互UI插件-->
<script th:src="@{/js/plugins/jquery-ui/jquery-ui.min.js}"></script>
<!--jquery地图插件-->
<script th:src="@{/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js}"></script>
<script th:src="@{/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js}"></script>
<!--饼图数据统计插件-->
<script th:src="@{/js/plugins/easypiechart/jquery.easypiechart.js}"></script>
<!--小体积高密度图表插件-->
<script th:src="@{/js/plugins/sparkline/jquery.sparkline.min.js}"></script>
<script th:src="@{/js/demo/sparkline-demo.min.js}"></script>
<!--sparkline图表插件-->
<script th:src="@{/js/plugins/sparkline/jquery.sparkline.min.js}"></script>
<script th:src="@{/js/demo/sparkline-demo.min.js}"></script>
</body>
</html>